<template>
    <a-table rowKey="id" size="small" :columns="tableColumns" :data-source="proList" :pagination="false" @expand="expand">
        <template #expandedRowRender="{ record }" v-if="detail.pmpTestInformationDTO && detail.pmpTestInformationDTO.testId">
            <a-table :columns="innerColumns" :data-source="record.innerData" :pagination="false">
                <template #faultList="{ record: innerRecord }">
                    <a style="display: block" @click="jumpTo(item)" v-for="(item, index) of innerRecord.faultList" :key="item.id"
                        >{{ index + 1 }}.{{ item.faultName }}</a
                    >
                </template>
            </a-table>
        </template>
    </a-table>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { getOtherPlatformIp } from '@/utils/util';
import { deepClone } from '@/utils/util';
import { message } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    emits: ['deleteHandle', 'success'],
    setup(props) {
        const proList = ref<Recordable>([]);
        const tableColumns: Recordable[] = [
            {
                title: '需求编号',
                dataIndex: 'requireNumber'
            },
            {
                title: '产品需求名称',
                dataIndex: 'requireName'
            }
        ];
        const innerColumns: Recordable[] = [
            {
                title: '用例名称',
                dataIndex: 'name'
            },
            // {
            //     title: '用例类型',
            //     dataIndex: 'type',
            // },
            {
                title: '用例性质',
                dataIndex: 'property'
            },
            // {
            //     title: '前置条件',
            //     dataIndex: 'precondition',
            // },
            // {
            //     title: '测试数据',
            //     dataIndex: 'test_data',
            // },
            // {
            //     title: '用例步骤',
            //     dataIndex: 'case_step',
            // },
            // {
            //     title: '预期结果',
            //     dataIndex: 'expected_result',
            // },
            {
                title: '级别',
                dataIndex: 'priority'
            },
            {
                title: '测试结果',
                dataIndex: 'testResult'
            },
            {
                title: '缺陷名称',
                dataIndex: 'faultList',
                slots: { customRender: 'faultList' }
            },
            {
                title: '备注',
                dataIndex: 'remark'
            }
        ];
        const expand = async (expand: boolean, row: any) => {
            if (expand && !row.innerData.length) {
                const query = {
                    productId: row.id
                };
                const { success, moule, errorMsg } = await api.versionModel.getTestCase({ ...query });
                if (success) {
                    row.innerData = moule && moule.length ? [...moule] : moule;
                } else {
                    message.error(errorMsg);
                }
            }
        };
        const jumpTo = ({ id, processId }) => {
            const ip = getOtherPlatformIp('acmdb');
            const json = JSON.stringify({
                type: 'pmp'
            });
            const url = `${ip}/#/faultManage/faultDetail?faultId=${id}&processId=${processId}&ssoToken=${store.getters.token}&json=${json}`;
            window.open(url, '_blank');
        };
        watch(
            () => props.detail.pmpProductRequires,
            (n) => {
                if (n) {
                    const list: any = deepClone(n);
                    proList.value = list.map((item) => ({
                        ...item,
                        innerData: item.innerData && item.innerData.length ? item.innerData : []
                    }));
                } else {
                    proList.value = [];
                }
            },
            { immediate: true }
        );
        return {
            proList,
            tableColumns,
            innerColumns,
            expand,
            jumpTo
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-table-row) {
    p {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.canEdit {
    cursor: pointer;
    color: @primary-color;
}
.disabledEdit {
    cursor: not-allowed;
    color: @disable-font-color;
}
.opinion-cont {
    white-space: pre-wrap;
    color: @error-color;
}
</style>